<template>
  <div class="R-Form">
    <!-- model绑定一个数据，表示表单数据存放地点 -->
    <el-form ref="rform" :model="RegisterData" :rules="RRules">
      <el-form-item prop="phoneNumber">
        <el-input v-model="RegisterData.phoneNumber" placeholder="用户名手机"></el-input>
      </el-form-item>
      <el-form-item type="flex" prop="captcha">
        <el-row type="flex" justify="end">
            <el-input v-model="RegisterData.captcha" placeholder="验证码" round></el-input>
            <el-button type="info" @click="handleCaptcha">发送验证码</el-button>
        </el-row>
        
      </el-form-item>
      <el-form-item prop="nickname">
        <el-input v-model="RegisterData.nickname" placeholder="昵称"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="RegisterData.password" placeholder="密码" show-password></el-input>
      </el-form-item>
      <el-form-item prop="password_a">
        <el-input v-model="RegisterData.password_a" placeholder="确认密码" show-password></el-input>
      </el-form-item>
    </el-form>
    <!-- 注册按钮 -->
    <el-button class="R-btn" type="primary" @click="handleSubmit">注册</el-button>
  </div>
</template>

<script>
export default {
    data(){
        var checkpass = (rule, value, callback) => {
        if (value !== this.RegisterData.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
        return{
            RegisterData:{
                phoneNumber:'',
                captcha:'',
                nickname:'',
                password:'',
                //这是重复密码
                password_a:'',
            },
            RRules:{
                phoneNumber:[
                    {required:true,message:"手机号不能为空哦",trigger:"blur"},
                    {pattern:/^1[3-9]\d{9}$/,message:"手机号格式不正确",trigger:"blur"}
                ],
                captcha:[
                    {required:true,message:"验证码不能为空哦",trigger:"blur"},
                    {pattern:/^\d{6}$/,message:"验证码为6位数字",trigger:"blur"}
                ],
                nickname:[
                    {required:true,message:"昵称不能为空哦",trigger:"blur"}
                ],
                password:[
                    {required:true,message:"密码不能为空哦",trigger:"blur"},
                ],
                password_a:[
                    {required:true,message:"密码不能为空哦",trigger:"blur"},
                    {validator:checkpass,trigger:"blur"}
                ]
            } 
        }
    },
    methods:{
      handleCaptcha(){
        if(this.RegisterData.phoneNumber==""){
          return this.$message.error("手机号码不正确")
        }
        this.$axios({
          url:"/captchas",
          method:"post",
          data:{
            tel:this.RegisterData.phoneNumber
          }
        }).then(res=>{
          this.$message.success("发送成功，验证码为000000")
        })
      },
      handleSubmit(){
        this.$refs.rform.validate((bool)=>{
          if(bool){
            //校验通过
            this.$axios({
              url:"/accounts/register",
              method:"post",
              data:{
                username:this.RegisterData.phoneNumber,
                nickname:this.RegisterData.nickname,
                captcha:this.RegisterData.captcha,
                password:this.RegisterData.password
              }
            }).then(res=>{
              this.$message("注册成功")
              //转跳到登陆界面
                        //提交服务器
                        this.$axios({
                        url:"/accounts/login",
                        method:'post',
                        data:{
                            username: this.RegisterData.phoneNumber,
                            password: this.RegisterData.password,
                        }
                    }).then(res=>{
                        console.log(res)
                        alert("登陆成功！")
                        //保存账号信息到全局全量state.userInfo
                        this.$store.commit('user/Set_userInfo',res.data)
                        //保存用户信息后转跳到首页
                        this.$router.replace('/')
                    })
            })
          }else{
            //校验不通过
            this.$message.error("表单数据不正确，请检查后提交")
          }
        })
      }
    }
}
</script>

<style>
    .R-Form{
        padding:20px
    }
    .R-btn{
        width:100%
    }
</style>